import React from 'react'
import { Route, Routes, NavLink } from 'react-router-dom'
const Home = React.lazy(() => import('./pages/Home'))
const About = React.lazy(() => import('./pages/About'))
const News = React.lazy(() => import('./pages/News'))
const Message = React.lazy(() => import('./pages/Message'))
const Test = React.lazy(() => import('./pages/Test'))
export default function App() {
  return (
    <div>
      App
      <br />
      <NavLink
        to="/home"
        style={({ isActive }) => {
          return isActive ? { color: '#fff', backgroundColor: 'pink' } : {}
        }}
      >
        home
      </NavLink>
      <NavLink
        to="/about"
        className={({ isActive }) => {
          return isActive ? 'select' : ''
        }}
      >
        about
      </NavLink>
      <hr />
      <Routes>
        <Route path="/" element={<Home></Home>}></Route>
        <Route path="/home" element={<Home></Home>}>
          {/* 直接在Route的子节点定义的Route表示嵌套的路由规则 */}
          <Route path="news" element={<News></News>}></Route>
          <Route path="message" element={<Message></Message>}></Route>
        </Route>
        <Route path="/about" element={<About></About>}></Route>
        <Route path="/xxx">
          <Route path="yyy" element={<Test></Test>}></Route>
        </Route>
      </Routes>
    </div>
  )
}
